import styled from 'styled-components'

import woff from '@/assets/fonts/iconfont-search.woff'
import ttf from '@/assets/fonts/iconfont-search.ttf'

import border from '@/assets/styled/border'

const SearchWrap = styled.div `
  @font-face {
    font-family: 'iconfont';
    src: url(${woff}) format('woff'),
         url(${ttf}) format('truetype');
  }

  .icon-font {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  height: .64rem;
  background-color: ${props => props.bgOuterColor || '#F5F5F5'};
  padding: .1rem .15rem;
  
`

const SearchInner = border(
  styled.div `
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: .06rem;
    color: #666;
    background-color: ${props => props.bgInnerColor || '#fff'};
    i {
      font-size: .12rem;
      margin-right: .05rem;
      color: #ee742f;
    }
  `
)

export {
  SearchWrap,
  SearchInner
}